<template>
	<div class="MyContainer">
		<el-tabs v-model="message">
			<el-tab-pane :label="`未读消息(${state.unread.length})`" name="first">
				<el-table :data="state.unread" :show-header="false" style="width: 100%">
					<el-table-column>
						<template #default="scope">
							<span class="message-title">{{"【"+scope.row.data+"】 " + scope.row.title }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="date" width="180"></el-table-column>
					<el-table-column width="120">
						<template #default="scope">
							<el-button size="small" @click="handleRead(scope.$index)">标为已读</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div class="handle-row">
					<el-button type="primary" @click="ReadAll">全部标为已读</el-button>
				</div>
			</el-tab-pane>

			<el-tab-pane :label="`已读消息(${state.read.length})`" name="second">
				<template v-if="message === 'second'">
					<el-table :data="state.read" :show-header="false" style="width: 100%">
						<el-table-column>
							<template #default="scope">
								<span class="message-title">{{ scope.row.title }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="date" width="150"></el-table-column>
						<el-table-column width="120">
							<template #default="scope">
								<el-button type="danger" @click="handleDel(scope.$index)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
					<div class="handle-row">
						<el-button type="danger" @click="DeleteAll">删除全部</el-button>
					</div>
				</template>
			</el-tab-pane>
			<el-tab-pane :label="`回收站(${state.recycle.length})`" name="third">
				<template v-if="message === 'third'">
					<el-table :data="state.recycle" :show-header="false" style="width: 100%">
						<el-table-column>
							<template #default="scope">
								<span class="message-title">{{ scope.row.title }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="date" width="150"></el-table-column>
						<el-table-column width="120">
							<template #default="scope">
								<el-button @click="handleRestore(scope.$index)">还原</el-button>
							</template>
						</el-table-column>
					</el-table>
					<div class="handle-row">
						<el-button type="danger" @click="ClearAll">清空回收站</el-button>
					</div>
				</template>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script setup lang="ts" name="tabs">
import { ref, reactive } from 'vue';
import { getMessage,changeMsgState,delMsg } from '../api/manager';
import { onBeforeRouteLeave } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus';

const state = reactive({
	unread: [] as any[],
	read: [] as any[],
	recycle: [] as any[]
});

const message = ref('first');

//获取消息
getMessage().then(res=>{
	var tmp = res.data;
	for(var i = 0;i < res.data.length;i++){
		if(tmp[i].status == "0"){
			state.unread.push({
				id:tmp[i].id,
				data:tmp[i].msgTime,
				title:tmp[i].content
			})
		}else if(tmp[i].status == '1'){
			state.read.push({
				id:tmp[i].id,
				data:tmp[i].msgTime,
				title:tmp[i].content
			})
		}
		else{
			state.recycle.push({
				id:tmp[i].id,
				data:tmp[i].msgTime,
				title:tmp[i].content
			})
		}
	}
}).catch(err=>{
	console.log(err)
})

const changeState = (item,state) =>{
	var list = new Array() 
	item.forEach(it => {list.push(it.id)})
	changeMsgState(state,list).then(res=>{
		if(res.code == 200){
			ElMessage({
				type:'success',
				message:'操作成功',
				duration:1000,
			})
		}
	}).catch(err=>{console.log("err=>",err)})
}

//未读 => 已读
const handleRead = (index: number) => {
	const item = state.unread.splice(index, 1);
	state.read = item.concat(state.read);
	changeState(item,"1")
};
//已读 => 删除
const handleDel = (index: number) => {
	const item = state.read.splice(index, 1);
	state.recycle = item.concat(state.recycle);
	changeState(item,"2")
};
//删除 => 已读（还原）
const handleRestore = (index: number) => {
	const item = state.recycle.splice(index, 1);
	state.read = item.concat(state.read);
	changeState(item,"3")
};

//全部已读
const ReadAll = () =>{
	const item = state.unread.splice(0, state.unread.length);
	state.read = item.concat(state.read);
	changeState(item,"1")
}

//删除全部
const DeleteAll = ()=>{
	const item = state.read.splice(0, state.read.length);
	state.recycle = item.concat(state.recycle);
	changeState(item,"2")
}

//清空回收站
const ClearAll = () => {
	const item = state.recycle.splice(0, state.recycle.length);
	//state.recycle = item.concat(state.)
	var del = new Array()
	del.forEach( d =>{ del.push(d.id) })
	delMsg(del).then(res=>{
		console.log("res:",res)
	}).catch(err=>{
		console.log("err=>",err)
	})
}

/*onBeforeRouteLeave((to, from, next) => {
    ElMessageBox.confirm('', '编辑内容尚未保存，是否保存？', {
      confirmButtonText: '保存',
      cancelButtonText: '取消',
      type: 'info',
      center: true,
      customClass: 'toggle-project-modal',
      beforeClose: async (action, instance, done) => {
        if (action === 'confirm') {
          instance.confirmButtonLoading = true
          //await sendSubmit()
          instance.confirmButtonLoading = false
          done()
        } else {
          done()
        }
      }
    }).then(async () => {
        next()
    })
    .catch(() => {
        //cancelHomeEdit()
        next()
    })
	//更新信息
})*/
</script>

<style>
.message-title {
	cursor: pointer;
}
.handle-row {
	margin-top: 30px;
	/* background-color: #9c7373; */
}
</style>
